<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>品优购</title>
    <title>
      品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
    </title>
    <!-- 网站说明 -->
    <meta
      name="description"
      content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"
    />
    <!-- 关键字 -->
    <meta
      name="keywords"
      content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"
    />
    <!-- <link
      rel="stylesheet"
      href="http://120.46.25.211:8080/WebRscs/Home/shopWeb/css/base.css"
    />
    <link
      rel="stylesheet"
      href="http://120.46.25.211:8080/WebRscs/Home/shopWeb/css/common.css"
    />
   
    <link
      rel="stylesheet"
      href="http://120.46.25.211:8080/WebRscs/Home/shopWeb/css/index.css"
    /> -->
    <link
      rel="shortcut icon"
      href="http://120.46.25.211:8080/WebRscs/Home/shopWeb/favicon.ico"
    />
    <style>
      /* 把我们所有标签的内外边距清零 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      /* em 和 i 斜体的文字不倾斜 */
      em,
      i {
        font-style: normal;
      }

      /* 去掉li 的小圆点 */
      li {
        list-style: none;
      }

      img {
        /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
        border: 0;
        /* 取消图片底侧有空白缝隙的问题 */
        vertical-align: middle;
      }

      button {
        /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
        cursor: pointer;
      }

      a {
        color: #666;
        text-decoration: none;
      }

      a:hover {
        color: #c81623;
      }

      button,
      input {
        /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
        font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
          "\5B8B\4F53", sans-serif;
        border: 0;
        outline: none;
      }

      body {
        /* CSS3 抗锯齿形 让文字显示的更加清晰 */
        -webkit-font-smoothing: antialiased;
        background-color: #fff;
        font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial,
          Hiragino Sans GB, "\5B8B\4F53", sans-serif;
        color: #666;
      }

      .hide,
      .none {
        display: none;
      }

      /* 清除浮动 */
      .clearfix:after {
        visibility: hidden;
        clear: both;
        display: block;
        content: ".";
        height: 0;
      }

      .clearfix {
        zoom: 1;
      }
      /* 声明字体图标 这里一定要注意路径的变化 */
      @font-face {
        font-family: "icomoon";
        src: url("./fonts/icomoon.eot?tomleg");
        src: url("./fonts/icomoon.eot?tomleg#iefix") format("embedded-opentype"),
          url("./fonts/icomoon.ttf?tomleg") format("truetype"),
          url("./fonts/icomoon.woff?tomleg") format("woff"),
          url("./fonts/icomoon.svg?tomleg#icomoon") format("svg");
        font-weight: normal;
        font-style: normal;
        font-display: block;
      }

      .w {
        width: 1200px;
        margin: 0 auto;
      }

      .fl {
        float: left;
      }

      .fr {
        float: right;
      }

      .style_red {
        color: #c81623;
      }

      .shortcut {
        height: 31px;
        line-height: 31px;
        background-color: #f1f1f1;
      }

      .shortcut ul li {
        float: left;
      }

      .shortcut .w .fr ul li:nth-child(even) {
        width: 1px;
        height: 12px;
        background-color: #666;
        margin: 10px 14px 0 16px;
      }

      .arrow_icon::after {
        content: "";
        font-family: "icomoon";
        margin-left: 10px;
      }

      /* header头部模块制作 */
      .header {
        position: relative;
        height: 106px;
      }

      .logo {
        position: absolute;
        top: 25px;
        width: 186px;
        height: 62px;
      }

      .logo a {
        display: block;
        width: 186px;
        height: 62px;
        background: url(http://120.46.25.211:8080/WebRscs/Home/shopWeb/images/logo.png)
          no-repeat;
        font-size: 0;
      }

      .search {
        position: absolute;
        left: 346px;
        top: 25px;
        width: 539px;
        height: 36px;
        border: 2px solid #b1191a;
      }

      .search input {
        float: left;
        width: 454px;
        height: 32px;
        padding-left: 10px;
      }

      .search button {
        float: left;
        width: 81px;
        height: 32px;
        padding-left: 10px;
        background-color: #b1191a;
        font-size: 16px;
        color: #f1f1f1;
        text-align: center;
        line-height: 32px;
      }

      .hotwords {
        position: absolute;
        top: 66px;
        left: 346px;
      }

      .hotwords a {
        margin: 0 10px;
      }

      .shopcar {
        position: absolute;
        right: 60px;
        top: 25px;
        width: 140px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        border: 1px solid #dfdfdf;
        background-color: #f7f7f7;
      }

      .shopcar::before {
        content: "\e93a";
        font-family: "icomoon";
        margin-right: 5px;
        color: #b1191a;
      }

      .shopcar::after {
        content: "\e920";
        font-family: "icomoon";
        margin-left: 10px;
      }

      .count {
        position: absolute;
        top: -5px;
        left: 105px;
        border-radius: 7px 7px 7px 0;
        height: 14px;
        color: #fff;
        background-color: #b1191a;
        padding: 0 5px;
        line-height: 14px;
      }

      .nav {
        height: 47px;
        border-bottom: #b1191a solid 2px;
      }

      .nav .dropdown {
        float: left;
        width: 210px;
        height: 45px;
        background-color: #b1191a;
      }

      .nav .navitems {
        float: left;
      }

      .dropdown .dt {
        width: 100%;
        height: 100%;
        color: #fff;
        text-align: center;
        line-height: 45px;
        font-size: 16px;
      }

      .dropdown .dd {
        /* display: none; */
        width: 210px;
        height: 465px;
        background-color: #c81623;
        margin-top: 2px;
      }

      .dropdown .dd ul li {
        position: relative;
        height: 31px;
        line-height: 31px;
        background-color: #c81623;
        margin-left: 1px;
        padding-left: 10px;
      }

      .dropdown .dd ul li::after {
        position: absolute;
        top: 1px;
        right: 10px;
        color: #fff;
        font-family: "icomoon";
        content: "\e920";
        font-size: 14px;
      }

      .dropdown .dd ul li:hover {
        background-color: #fff;
      }

      .dropdown .dd ul li:hover a {
        color: #c81623;
      }

      .dropdown .dd ul li a {
        font-size: 14px;
        color: #fff;
      }

      .navitems ul li {
        float: left;
      }

      .navitems ul li a {
        display: block;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        padding: 0 25px;
      }

      /* 底部模块制作 */
      .footer {
        height: 415px;
        background-color: #f5f5f5;
        padding-top: 30px;
      }

      .mod_service {
        height: 80px;
        border-bottom: 1px solid #ccc;
      }

      .mod_service ul li {
        float: left;
        width: 300px;
        height: 50px;
        padding-left: 35px;
      }

      .mod_service ul li h5 {
        float: left;
        width: 50px;
        height: 50px;
        background: url(http://120.46.25.211:8080/WebRscs/Home/shopWeb/images/icons.png)
          no-repeat -252px -2px;
        margin-right: 8px;
      }

      .service_txt h4 {
        font-size: 14px;
      }

      .service_txt p {
        font-size: 12px;
      }

      .mod_help {
        height: 185px;
        border-bottom: 1px solid #ccc;
        padding-top: 10px;
        padding-left: 50px;
      }

      .mod_help dl dt {
        font-size: 16px;
        margin-bottom: 10px;
      }

      .mod_help dl {
        float: left;
        width: 200px;
      }

      .mod_help dl:last-child {
        width: 90px;
        text-align: center;
      }

      .mod_copyright {
        text-align: center;
        padding-top: 20px;
      }

      .links {
        margin-bottom: 15px;
      }

      .links a {
        margin: 0 3px;
      }

      .copyright {
        line-height: 20px;
      }
      .main {
        width: 980px;
        height: 455px;
        margin-left: 220px;
        margin-top: 12px;
      }

      .focus {
        float: left;
        overflow: hidden;
        width: 721px;
        height: 453px;
      }

      .newsflash {
        float: right;
        width: 250px;
        height: 453px;
      }

      .news {
        height: 165px;
        border: solid 1px #e4e4e4;
      }

      .new-hd {
        line-height: 33px;
        height: 33px;
        padding: 0 15px;
        border-bottom: 1px dotted #e4e4e4;
      }

      .new-hd h5 {
        float: left;
        font-size: 14px;
      }

      .new-hd .more {
        float: right;
      }

      .new-hd .more::after {
        font-family: "icomoon";
        content: "\e920";
      }

      .new-bd ul li {
        height: 24px;
        line-height: 24px;
        padding: 5px 15px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .lifeservice {
        overflow: hidden;
        height: 209px;
        border: 1px solid #e4e4e4;
        border-top: 0;
      }

      .lifeservice ul {
        width: 252px;
      }

      .lifeservice ul li {
        float: left;
        width: 63px;
        height: 71px;
        border-right: 1px solid #e4e4e4;
        border-bottom: 1px solid #e4e4e4;
        text-align: center;
      }

      .lifeservice ul li i {
        display: inline-block;
        width: 24px;
        height: 28px;
        background-color: palegoldenrod;
        margin-top: 12px;
        background: url(http://120.46.25.211:8080/WebRscs/Home/shopWeb/images/icons.png)
          no-repeat -17px -16px;
      }

      .bargain {
        margin-top: 5px;
      }
    </style>
  </head>

  <body>
    <!-- 快捷导航模块 start -->
    <section class="shortcut">
      <div class="w">
        <div class="fl">
          <ul>
            <li>品优购欢迎您！&nbsp;</li>
            <li>
              <a href="#">请登录</a> &nbsp;
              <a href="#" class="style_red">免费注册</a>
            </li>
          </ul>
        </div>
        <div class="fr">
          <ul>
            <li>我的订单</li>
            <li></li>
            <li class="arrow_icon">我的品优购</li>
            <li></li>
            <li>品优购会员</li>
            <li></li>
            <li>企业采购</li>
            <li></li>
            <li class="arrow_icon">关注品优购</li>
            <li></li>
            <li class="arrow_icon">客户服务</li>
            <li></li>
            <li class="arrow_icon">网站导航</li>
          </ul>
        </div>
      </div>
    </section>
    <!-- 快捷导航模块 end -->

    <!-- header头部模块制作 start -->
    <header class="header w">
      <!-- logo模块 -->
      <div class="logo">
        <h1>
          <a href="index.html" title="品优购商城">品优购商城</a>
        </h1>
      </div>
      <!-- search搜索模块 -->
      <div class="search">
        <input type="search" placeholder="语言开发" />
        <button>搜索</button>
      </div>
      <!-- hotwords模块制作 -->
      <div class="hotwords">
        <a href="#" class="style_red">优惠购首发</a>
        <a href="#">亿元优惠</a>
        <a href="#">9.9元团购</a>
        <a href="#">美满99减30</a>
        <a href="#">办公用品</a>
        <a href="#">电脑</a>
        <a href="#">通信</a>
      </div>
      <!-- shopcar模块制作 -->
      <div class="shopcar">
        我的购物车
        <i class="count">8</i>
      </div>
    </header>
    <!-- header头部模块制作 end -->

    <!-- nav模块制作 start -->
    <nav class="nav">
      <div class="w">
        <div class="dropdown">
          <div class="dt">全部商品分类</div>
          <div class="dd">
            <ul>
              <li><a href="#">家用电器</a></li>
              <li>
                <a href="#">手机、</a><a href="#">数码、</a><a href="#">通信</a>
              </li>
              <li><a href="#">电脑、办公</a></li>
              <li><a href="#">家居、家具、家装、厨具</a></li>
              <li><a href="#">男装、女装、童装、内衣</a></li>
              <li><a href="#">个户化妆、清洁用品、宠物</a></li>
              <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a></li>
              <li><a href="#">运动户外、钟表</a></li>
              <li><a href="#">汽车、汽车用品</a></li>
              <li><a href="#">母婴、玩具乐器</a></li>
              <li><a href="#">食品、酒类、生鲜、特产</a></li>
              <li><a href="#">医药保健</a></li>
              <li><a href="#">图书、音像、电子书</a></li>
              <li><a href="#">彩票、旅行、充值、票务</a></li>
              <li><a href="#">理财、众筹、白条、保险</a></li>
            </ul>
          </div>
        </div>
        <div class="navitems">
          <ul>
            <li><a href="#">服装城</a></li>
            <li><a href="#">服装城</a></li>
            <li><a href="#">服装城</a></li>
            <li><a href="#">服装城</a></li>
            <li><a href="#">服装城</a></li>
            <li><a href="#">服装城</a></li>
            <li><a href="#">服装城</a></li>
            <li><a href="#">服装城</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- nav模块制作 end -->

    <!-- 首页专有的模块main start -->
    <div class="w">
      <div class="main">
        <div class="focus">
          <ul>
            <li>
              <img
                src="http://120.46.25.211:8080/WebRscs/Home/shopWeb/upload/focus1.png"
                alt=""
              />
            </li>
          </ul>
        </div>
        <div class="newsflash">
          <div class="news">
            <div class="new-hd">
              <h5>品优购快报</h5>
              <a href="#" class="more">更多</a>
            </div>
            <div class="new-bd">
              <ul>
                <li>
                  <a href="#"><strong>[重磅]</strong>十个勤天，做大做强！</a>
                </li>
                <li>
                  <a href="#"><strong>[重磅]</strong>十个勤天，做大做强！</a>
                </li>
                <li>
                  <a href="#"
                    ><strong>[重磅]</strong
                    >十个勤天，做大做强！十个勤天，做大做强！十个勤天，做大做强！</a
                  >
                </li>
                <li>
                  <a href="#"><strong>[重磅]</strong>十个勤天，做大做强！</a>
                </li>
                <li>
                  <a href="#"><strong>[重磅]</strong>十个勤天，做大做强！</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="lifeservice">
            <ul>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
              <li>
                <i></i>
                <p>话费</p>
              </li>
            </ul>
          </div>
          <div class="bargain">
            <img
              src="http://120.46.25.211:8080/WebRscs/Home/shopWeb/upload/bargain.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 首页专有的模块main end -->

    <!-- footer底部模块的制作 start -->
    <footer class="footer">
      <div class="w">
        <div class="mod_service">
          <ul>
            <li>
              <h5></h5>
              <div class="service_txt">
                <h4>正品保障</h4>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <h5></h5>
              <div class="service_txt">
                <h4>正品保障</h4>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <h5></h5>
              <div class="service_txt">
                <h4>正品保障</h4>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li>
              <h5></h5>
              <div class="service_txt">
                <h4>正品保障</h4>
                <p>正品保障，提供发票</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="mod_help">
          <dl>
            <dt>服务指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>服务指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>服务指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>服务指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>服务指南</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">会员介绍</a></dd>
            <dd><a href="#">生活旅行/团购</a></dd>
            <dd><a href="#">常见问题</a></dd>
            <dd><a href="#">大家电</a></dd>
            <dd><a href="#">联系客服</a></dd>
          </dl>
          <dl>
            <dt>帮助中心</dt>
            <dd>
              <img
                src="http://120.46.25.211:8080/WebRscs/Home/shopWeb/images/wx_cz.jpg"
                alt=""
              />品优购客户端
            </dd>
          </dl>
        </div>
        <div class="mod_copyright">
          <div class="links">
            <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 |
            商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区
            | 品优购公益 | English Site | Contact U
          </div>
          <div class="copyright">
            地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
            电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br />
            京ICP备08001421号京公网安备110108007702
          </div>
        </div>
      </div>
    </footer>
    <!-- footer底部模块的制作 end -->
  </body>
</html>
